<template>
  <div class="container">
    <div class="main">
      <h3>修改库存</h3>
      <div class="nameMain information">
        <label for>名称：</label>
        <input v-model="inventory.commodityName" type="text" />
      </div>
      <div class="ageMain information">
        <label for>价格：</label>
        <input v-model="inventory.price" type="text" />
      </div>
      <div class="genderMain information">
        <label for>产地：</label>
        <input v-model="inventory.orgin" type="text" />
      </div>
      <div class="characterMain information">
        <label for>包装：</label>
        <input v-model="inventory.package" type="text" />
      </div>
      <div class="characterMain information">
        <label for>规格：</label>
        <input v-model="inventory.amount" type="text" />
      </div>
      <div class="equipMain information">
        <label for>库存：</label>
        <input v-model="inventory.inventoryNumbers" type="text" />
      </div>
      <div class="designationMain information">
        <label for>图片：</label>
        <el-upload
          class="avatar-uploader"
          action="/merchant/addImgs"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="temporaryImg" :src="temporaryImg" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="equipMain information">
        <label for>详情：</label>
        <el-upload
          class="upload-demo"
          action="/merchant/uploadImgs"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="success"
          list-type="picture"
          :multiple="true"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>
      </div>

      <div class="information button">
        <el-button @click="sureUpdate" type="success">确认添加</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
var { mapActions, mapState } = createNamespacedHelpers("merchant");
export default {
  data() {
    return {
      inventory: {
        commodityName: "",
        price: "",
        orgin: "",
        package: "",
        inventoryNumbers: "",
        img: "",
        particularsImg: [],
        amount: "",
        merchantId: "",
      },
      temporaryImg: "",
      detailsImge: [],
      fileList: [
        // {
        //   name: "food.jpeg",
        //   url:
        //     "http://localhost:3003/images/261613267.jpeg"
        // },
        // {
        //   name: "food2.jpeg",
        //   url:
        //     "http://localhost:3003/images/261613267.jpeg"
        // }
      ]
    };
  },
  computed: {
    // merchantIds(){
    //   return this.merchantId;
    // }
  },
  methods: {
    ...mapActions(["updateInventoryAsync", "addInventoryAsync"]),
    handleAvatarSuccess(res, file) {
      this.temporaryImg = URL.createObjectURL(file.raw);
      this.inventory.img = file.response[0];
      console.log(this.inventory.img);
    },
    success(file, fileList) {
      this.inventory.particularsImg.push(file[0]);
    },
    handleRemove(file, fileList) {
      console.log("handleRemove", file, fileList);
    },
    handlePreview(file) {
      console.log("handlePreview", file);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    sureUpdate() {
      // console.log(this.inventory)
      var bool = this.addInventoryAsync(this.inventory);
      if (bool) {
        this.$router.push("/admin/index/inventory").catch(err => err);
      }
    }
  },
  created(){
    this.inventory.merchantId=this.merchantId;
    console.log(this.inventory.merchantId)
  }
};
</script>

<style scoped>
.container {
  width: 400px;
  /* display: flex;
  justify-content: center; */
  margin: 0 auto;
}
.main {
  width: 100%;
  padding: 20px;
  border: 1px solid #999;
  border-radius: 10px;
}
.main h3 {
  background-color: rgb(160, 160, 160);
  color: #fff;
  line-height: 35px;
  text-align: start;
  padding-left: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.information {
  font-size: 16px;
  display: flex;
  margin: 10px 0px;
  align-content: center;
}
.button {
  display: flex;
  justify-content: center;
}
.information input {
  outline: none;
  height: 20px;
  padding-left: 5px;
}
.information select {
  height: 25px;
  width: 50px;
  outline: none;
}
.information span {
  margin: 0px 10px 0px 5px;
}
.imgMain input {
  width: 170px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader-icon {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
.avatar {
  width: 100px;
  height: 100px;
}
.el-upload-dragger {
  width: 150px;
  height: 150px;
}
.el-upload-dragger .el-icon-upload {
  margin: 20px 0 16px;
}
.el-main[data-v-452a4712] {
  text-align: start;
}
.el-main {
  display: flex;
  justify-content: center;
}
</style>